<template>
    <div class="w-full h-full bg-[#4f46e5] absolute">
        <Particles
        style="height:100%;width:100%;"
        id="tsparticles"
       :particlesInit="particlesInit"
        :options="options"
    />
    </div>
    <div class="flex h-full justify-center items-center absolute w-full z-10">
   <div class="w-[20rem] bg-white shadow-xl rounded-2xl border-2 flex flex-col justify-center items-center px-10 h-[30rem]" :class="{'h-[34rem] px-14 w-[25rem]': !isLogin}">
       <div class="sm:mx-auto sm:w-full sm:max-w-sm">
     <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
       登录您的账号
     </h2>
   </div>

   <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
     <div class="flex space-x-4 justify-center">
       <button
         @click="isLogin = true"
        :class="{ 'btn btn-info text-white': isLogin, 'btn btn-active btn-ghost':!isLogin }"
       >
         登录
       </button>
       <button
         @click="isLogin = false"
         :class="{'btn btn-info text-white': !isLogin, 'btn btn-active btn-ghost':isLogin }"
        
       >
         注册
       </button>
     </div>
     <form class="space-y-6 mt-5" @submit.prevent>
       <div v-if="isLogin">
         <div>
           <label for="email" class="block text-sm font-medium leading-6 text-gray-900">
             邮箱地址
           </label>
           <div class="mt-2">
             <input
               id="email"
               name="email"
               type="email"
               autocomplete="email"
               required
               class="px-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
             />
           </div>
         </div>

         <div>
           <div class="flex items-center justify-between">
             <label for="password" class="block text-sm font-medium leading-6 text-gray-900">
               密码
             </label>
             <div class="text-sm">
               <a href="#" class="font-semibold text-indigo-600 hover:text-indigo-500">
                 忘记密码?
               </a>
             </div>
           </div>
           <div class="mt-2">
             <input
               id="password"
               name="password"
               type="password"
               autocomplete="current-password"
               required
               class="px-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
             />
           </div>
         </div>

         <div class="mt-5">
           <button
             @click.prevent="Login"
             type="submit"
             class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
           >
             登录
           </button>
         </div>
       </div>
       <div v-else>
         <div>
           <label for="reg-email" class="block text-sm font-medium leading-6 text-gray-900">
             邮箱地址
           </label>
           <div class="mt-2">
             <input
               id="reg-email"
               name="reg-email"
               type="email"
               autocomplete="email"
               required
               class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
             />
           </div>
         </div>

         <div>
           <label for="reg-password" class="block text-sm font-medium leading-6 text-gray-900">
             密码
           </label>
           <div class="mt-2">
             <input
               id="reg-password"
               name="reg-password"
               type="password"
               autocomplete="new-password"
               required
               class="px-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
             />
           </div>
         </div>

         <div>
           <label for="confirm-password" class="block text-sm font-medium leading-6 text-gray-900">
             确认密码
           </label>
           <div class="mt-2">
             <input
               id="confirm-password"
               name="confirm-password"
               type="password"
               autocomplete="new-password"
               required
               class="px-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
             />
           </div>
         </div>

         <div>
           <button
             type="submit"
             class="mt-10 flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
           >
             注册
           </button>
         </div>
       </div>
     </form>

     <p class="mt-10 text-center text-sm text-gray-500">
       没有账号？
       <a href="#" class="font-semibold leading-6 text-indigo-600 hover:text-indigo-500">
         免费14天使用
       </a>
     </p>
   </div>
   </div>
 </div>
</template>

<script setup lang="ts">
   import { ref,reactive } from 'vue'
   let isLogin = ref(true)
    import {loadFull} from 'tsparticles'
  import type { Engine } from 'tsparticles-engine'
   // 定义粒子动画
const particlesInit = async (engine: Engine) => {
  await loadFull(engine);
};
const options = reactive({
  fpsLimit: 600,
  interactivity: {
    events: {
      onClick: {
        enable: true,
        mode: "push", // 可用的click模式有: "push", "remove", "repulse", "bubble"。
      },
      onHover: {
        enable: true,
        mode: "grab", // 可用的hover模式有: "grab", "repulse", "bubble"。
      },
      resize: true,
    },
    modes: {
      grap: {
        distance: 300,
        duration: 1,
        opacity: 1,
        size: 40,
      },
      push: {
        quantity: 4,
      },
      repulse: {
        distance: 200,
        duration: 0.4,
      },
    },
  },
  particles: {
    color: {
      value: "#ffffff",
    },
    links: {
      color: "#ffffff", // '#dedede'。线条颜色。
      distance: 120, // 线条长度
      enable: true, // 是否有线条
      opacity: 0.37, // 线条透明度。
      width: 1.4, // 线条宽度。
    },
    collisions: {
      enable: false,
    },
    move: {
      direction: "none",
      enable: true,
      outMode: "bounce",
      random: false,
      speed: 1, // 粒子运动速度。
      straight: false,
      out_mode: "out",
      attract: {
          "enable": false,
          "rotateX": 600,
          "rotateY": 1200
        }
    },
    number: {
      density: {
        enable: true,
        value_area: 800
      },
      value: 80, // 粒子数量。
    },
    opacity: {
      value: 0.4
    },
    shape: {
      type: "star", // 可用的粒子外观类型有："circle","edge","triangle", "polygon","star"
    },
    size: {
      random: true,
      value: 3, // 粒子大小。
    },
  },
  detectRetina: true,
});

/**
 * 登录和注册功能
 */
import { useRouter } from 'vue-router'
const router = useRouter()
const Login = (e: any) => {
  // 1. 判断是否可以进行登录
  // 2. 跳转路由进入首页
  router.push('/')
}
</script>
